<template>
  <div class="enclosure" :style="{marginTop:'0.65rem' }">
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in dataList"
        :key="index"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        :timestamp="activity.comment"
      >
        <span>{{ activity.modeTime }}</span>
        <div class="is-light">
          <div class="eaptitle" v-if="activity.oldMode == 1">ESP</div>
          <div class="eaptitle" v-else-if="activity.oldMode == 2">LTSI</div>
          <div class="eaptitle" v-else-if="activity.oldMode == 3">STSI</div>
          <div class="eaptitle" v-else-if="activity.oldMode == 4">GL</div>
          <div class="eaptitle" v-else-if="activity.oldMode == 5">CIRC</div>
          <div class="eaptitle" v-else-if="activity.oldMode == 6">INT</div>
          <div class="eaptitle" v-else-if="activity.oldMode == 7">SI</div>
          <div class="eaptitle" v-else-if="activity.oldMode == 8">SUSP</div>
          <div class="joint">
            <el-icon>
              <Right />
            </el-icon>
            <!-- <i class="el-icon-minus"></i>
            <i class="el-icon-caret-right" style="margin-left: -0.3rem"></i>-->
          </div>
          <div class="sititle" v-if="activity.newMode == 1">ESP</div>
          <div class="sititle" v-else-if="activity.newMode == 2">LTSI</div>
          <div class="sititle" v-else-if="activity.newMode == 3">STSI</div>
          <div class="sititle" v-else-if="activity.newMode == 4">GL</div>
          <div class="sititle" v-else-if="activity.newMode == 5">CIRC</div>
          <div class="sititle" v-else-if="activity.newMode == 6">INT</div>
          <div class="sititle" v-else-if="activity.newMode == 7">STSI</div>
          <div class="sititle" v-else-if="activity.newMode == 8">SUSPSI</div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: "ScrollModel",
  props: {
    dataList: {
      type: Array,
      default: () => {}
    },
    changeData: {
      type: Function
    },
    wellName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      idnameval: ""
    };
  },
  watch: {
    wellName: {
      handler(idname) {
        this.idnameval = idname;
        // if (idname == "12P04") {
        //  let enclosures = document.getElementsByClassName("enclosure");
        //   enclosures[0].style.flex = "none";
        //   enclosures[0].style.height = "40%";
        // }else{
          let enclosures = document.getElementsByClassName("enclosure");
          enclosures[0].style.flex = "auto";
          enclosures[0].style.height = "auto";
        // }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.enclosure {
  width: calc(100% - 10px);
  flex: auto;
  display: flex;
  overflow-y: scroll;
  background-color: rgb(18, 26, 50);
  padding: 10px 10px 0;
  margin-bottom: 10px;
  margin-top: 10px;
  z-index: 30;

  // position: absolute;
  // bottom: 0;
  // right: 0;
  .el-timeline {
    padding: 10px 25px;
  }

  ::v-deep .el-timeline-item__content {
    color: #fff !important;
    text-align: left;
    font-size: 1.5vh;
    line-height: 16px;
  }

  ::v-deep .el-timeline-item__timestamp {
    color: #fff !important;
    text-align: left;
    font-size: 1.5vh;
  }

  ::v-deep .el-timeline-item__node--large {
    height: 12px;
    width: 12px;
    left: -1px !important;
  }

  :deep(.el-timeline-item__content) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  // .eaptitle {
  //   width: 39px;
  //   height: 1rem;
  //   position: absolute;
  //   top: 2px;
  //   left: 190px;
  // }
  // .joint {
  //   display: flex;
  //   width: 70px;
  //   justify-content: space-between;
  // }
  // .sititle {
  //   width: 24px;
  //   height: 1rem;
  //   position: absolute;
  //   top: 2px;
  //   left: 225px;
  // }
  .is-light {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 70px;
  }
}

/* 滚动条整体样式 */
.enclosure::-webkit-scrollbar {
  width: 10px;
  height: 8px;
}

/* 滚动条滑块 */
.enclosure::-webkit-scrollbar-thumb {
  background-color: rgb(51, 153, 255) !important;
  border-radius: 5px;
  /* 滑块的圆角 */
}
</style>
